<!--
  文件描述：角色管理
  创建时间：2023/9/5 15:00
  创建人：二
-->
<template>
  <div class="m-page-wrap">
    <el-form class="m-search-form" ref="searchForm" :inline="true" :model="searchForm">
      <el-form-item label="角色名称" prop="name">
        <el-input v-model="searchForm.name"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleRefresh(true)">查询</el-button>
        <el-button @click="resetSearchForm()">重置</el-button>
      </el-form-item>
    </el-form>
    <div class="m-table-wrap">
      <div class="m-btn-list">
        <el-button
          type="primary"
          v-has-permit="['system:role:add']"
          @click="handleAdd()">
          新增
        </el-button>
      </div>

      <m-table
        :columns="columns"
        :data="tableData"
        row-key="id"
        :page-size.sync="pagination.limit"
        :current-page.sync="pagination.page"
        :total="pagination.total"
        @pagination-change="handleRefresh"
        :loading="loading">

        <template #action="{ row }">
          <el-link
            type="primary"
            :underline="false"
            v-has-permit="['system:role:edit']"
            @click="handleEdit(row)"
          >
            编辑
          </el-link>
          <el-link
            type="danger"
            :underline="false"
            v-has-permit="['system:role:remove']"
            @click="handleDelete(row)"
          >
            删除
          </el-link>
        </template>

      </m-table>

    </div>
    <Edit ref="edit" :menuTreeData="menuTreeData" @success="handleRefresh"/>
  </div>
</template>

<script>
import { roleListApi } from '@/api/system/role';
import { menuTreeApi } from '@/api/system/menu';
import Edit from './edit'
export default {
  name: 'Role',
  components: {
    Edit
  },
  data() {
    return {
      searchForm: {
        name: ''
      },
      columns: [
        { label: '角色名称', prop: 'name', align: 'center' },
        { label: '创建时间', prop: 'createTime', align: 'center' },
        { label: '操作', prop: 'action', align: 'center', slotName: 'action', width: 220, fixed: 'right' }
      ],
      tableData: [],
      loading: false,
      pagination: {
        page: 1,
        limit: 10,
        total: 0
      },
      menuTreeData: []
    }
  },
  created() {
  },
  activated() {
    this.handleRefresh(this.mixinFirstLoad);
    this.getMenuTreeData()
  },
  methods: {
    // 重置搜索表单
    resetSearchForm() {
      this.$refs.searchForm.resetFields();
      this.handleRefresh(true);
    },
    /**
     * 刷新列表
     * @param {Boolean} bool 强制刷新到第一页
     */
    handleRefresh(bool = false) {
      if (bool) this.pagination.page = 1;
      this.mixinFirstLoad = false;
      this.getData();
    },
    // 获取数据
    getData() {
      this.loading = true;
      roleListApi({
        ...this.searchForm,
        page: this.pagination.page,
        limit: this.pagination.limit
      }).then(res => {
        this.tableData = res.data.list;
        this.pagination.total = res.data.total;
      }).finally(() => {
        this.loading = false;
      })
    },
    // 获取菜单
    getMenuTreeData() {
      menuTreeApi().then(result => {
        this.menuTreeData = result.data;
      }).finally(() => {
        this.loading = false;
      })
    },
    // 新增
    handleAdd() {
      this.$refs.edit.open()
    },
    // 编辑
    handleEdit(data) {
      this.$refs.edit.open(data, 'edit')
    },
    // 删除
    handleDelete() {
      this.mixinMessageBoxConfirm('此操作将删除该数据, 是否继续?').then(({instance, done}) => {
        setTimeout(() => {
          done();
          setTimeout(() => {
            instance.confirmButtonLoading = false;
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          }, 300);
        }, 2000);
      }).catch(() => {})
    }
  }
}
</script>

<style scoped>

</style>
